<template>
  <div style="width: 100%;height: 100%;margin-left: 0px !important;">
    <div class="gui_controller" id="gui_controller">
      <div style="width: 100%;height: 100%;margin-left:30px;margin-top: 20px;" class="obj_gui" id="obj_gui">
        <div class="select_box" style="width: 65%;float: left">
          <el-select v-model="guiValue" placeholder="控制label的工具" @change="handleSelectionSwitching">
            <el-option
                v-for="item in guis"
                :key="item.label"
                :label="item.label"
                :value="item.tag">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px">
                  {{ item.tag }}
            </span>
            </el-option>
          </el-select>
        </div>
        <div style="float: left">
          <el-button type="danger" :icon="Delete" circle @click="closeGui"/>
        </div>
        <div class="gui_box"></div>
      </div>
    </div>

    <div ref="container" class="container">
      <div id="r1" class="r1"></div>
    </div>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router/dist/vue-router";
import labels from "@/api/labels";
import Analysis from "@/components/analysis/Label";
import router from "@/router";
import {Delete} from "@element-plus/icons-vue";

export default {
  name: "ThreeDViews",
  components:{
    Analysis,
  },
  setup(){
    // 选择的数据模型
    const guiValue = ref('')
    let guis = ref([])

    let count = 0;

    const radio = ref("3D模型图")

    const drawer = ref(false)
    const direction = ref('ltr')

    let isDragging = false // 标记元素是否正在被拖拽
    let mouseOffset = { x: 0, y: 0 };

    onMounted(()=>{
      const route = useRoute()

      let da = {}
      // da.labelId = route.params.labelId
      da.labelId = '123141'

      localStorage.setItem('labelId',route.params.labelId)

      labels.count(da).then(res => {
        if(res.data.count > 0){
          count = res.data.count
          createThreeD(res.data.count)
          for(let j=0;j<res.data.count;j++){
            let select = {}
            select.tag = j
            let a = j+1
            select.label = "Label"+a
            guis.value.push(select)
          }
        }else{

        }
      })

      document.getElementById("obj_gui").addEventListener("mousedown", function (e) {
        isDragging = true;
        mouseOffset.x = e.clientX - document.getElementById("obj_gui").offsetLeft;
        mouseOffset.y = e.clientY - document.getElementById("obj_gui").offsetTop;
      });
      document.addEventListener("mousemove", function (e) {
        if (isDragging) {
          document.getElementById("obj_gui").style.left = e.clientX - mouseOffset.x + "px";
          document.getElementById("obj_gui").style.top = e.clientY - mouseOffset.y + "px";
        }
      });
      document.addEventListener("mouseup", function (e) {
        isDragging = false;
      });
    });



    function createThreeD(count){
      const r = new X.renderer3D();
      r.container = 'r1';

      r.init();
      const gui = new dat.GUI({ autoPlace: false });
      const guiController = document.getElementById('gui_controller')
      guiController.appendChild(gui.domElement);

      for (let i=1;i<= count;i++){
        const path = "http://localhost:8080/webPage/download/nii?labelId=123141&&filename=Label"+i+".obj"
        const volume = new X.mesh();
        volume.color = [Math.random(), Math.random(), Math.random()];
        volume.opacity = 0.7;
        volume.file = path;

        // 123123

        let name = "name:"+i
        const lhgui = gui.addFolder(name);
        lhgui.add(volume, 'visible');
        lhgui.add(volume, 'opacity', 0, 1);
        lhgui.addColor(volume, 'color');
        lhgui.open(); // Close the folder by default

        r.add(volume);
      }

      r.render();

      closeGui();
    }

    function handleSelectionSwitching(){
      const specialItems1 = document.getElementsByClassName('folder');
      specialItems1[guiValue.value].style.display = 'block'
    }

    function closeGui(){
      console.log(count)
      const specialItems1 = document.getElementsByClassName('folder');
      document.getElementsByClassName('close-button')[0].style.display = 'none'
      for (let j=0;j< count;j++){
        specialItems1[j].style.display = 'none'
      }
    }

    function changeRadio(){
      console.log(radio.value)
      switch (radio.value){
        case '修改label': router.push({ name: 'ToolsViews'});break;
        case '3D模型图': router.push({ name: 'ThreeDViews'});break;
        case '2D三视图': router.push({ name: 'ThreeViews', params: { type: "1" }});break;
      }
    }


    return{
      guiValue,
      guis,
      handleSelectionSwitching,
      closeGui,
      radio,
      changeRadio,
      Analysis,
      drawer,
      direction,
      Delete,
      isDragging,
    }
  }
}
</script>

<style scoped>
.dg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
}
.main{
  height: 150px !important;
}
.gui_controller{
  width: 272px;
  height: 65px;
  position: fixed;
  right: -5px;
  text-align: center;
  top: 100px;
  z-index: 9999999;
}

.container{
  width: 100%;
  height: 100%;
  background-color: #020327;
}
.r1{
  background-color: #000000;
  width: 100%;
  height: 98%;
}
</style>